<div id="work_order_grid_here"></div>
<script id="work_order_grid_tpl" type="text/html">
    <div class="layui-bg-gray" style="padding: 16px;">
        <div class="layui-row layui-col-space15">
        {{#  layui.each(d.list, function(index, item){ }}
          <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">{{= item.name }}</div>
                <div class="layui-card-body">
                    <span>单据状态:{{= item.status }}</span></br>
                    <span>物料名称:{{= item.item_name }}</span></br>
                    <span>计划数量:{{= item.qty }}</span></br>
                    <span>完工数量:{{= item.produced_qty }}</span></br>
                    <span>报废数量:{{= item.process_loss_qty }}</span></br>
                </div>
              </div>        
          </div>      
        {{#  }); }}
        <p>{{#  if(d.list.length === 0){ }}
        无数据
        {{#  } }}</p>
        </div>
    </div>
</script>
<script>
    var data = {
        "list": []
          };         
    
    function load_data(){
        frappe.db.get_list('Work Order', {
            fields: ['name', 'status','item_name','qty','produced_qty','process_loss_qty'],
            limit_page_length: 100, 
            limit:100          
        }).then(records => {
            console.log(records);
            data.list = records;
            render_data();
        })
    }    

    function render_data(){
        var getTpl = work_order_grid_tpl.innerHTML;
        var view = document.getElementById('work_order_grid_here');  
        layui.use(['laytpl', 'form','layer'], function () {
            var laytpl = layui.laytpl;
            laytpl(getTpl).render(data, function (html) {
                view.innerHTML = html;
            });        
        });
    }
    
</script>